<template>
  <div class="head-container">
    <el-row :gutter="10" style="text-align: right">
      <el-button
        plain
        class="filter-item"
        size="mini"
        type="warning"
        icon="el-icon-plus"
        @click="$refs.form.dialog = true">增加人员</el-button>
    </el-row>
    <el-form ref="queryForm" :inline="true"  size="small" label-width="80px">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :lg="6">
        <el-form-item label="卡号">
          <el-input v-model="query.cartNum" clearable placeholder="输入卡号" style="width: 110px;" class="filter-item"/>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-form-item label="定位编号">
          <el-input v-model="query.workerDeviceNum" clearable placeholder="输入定位编号" style="width: 110px;" class="filter-item"/>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-form-item label="姓名">
          <el-input v-model="query.workerName" clearable placeholder="输入姓名" style="width: 110px;" class="filter-item"/>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-form-item label="身份证">
          <el-input v-model="query.idNum" clearable placeholder="输入身份证" style="width: 110px;" class="filter-item"/>
        </el-form-item>
      </el-col>
      <!--<el-col :xs="24" :sm="24" :lg="10">-->
        <!--<el-form-item label="部门">-->
          <!--<treeselect v-model="query.deptId" :options="dict.deptTree" style="width: 110px;"  class="filter-item" :defaultExpandLevel="9"-->
                      <!--placeholder="选择部门"/>-->
        <!--</el-form-item>-->
      <!--</el-col>-->
    </el-row>
    <el-row :gutter="10" style="text-align: center">
      <el-button class="filter-item" size="mini" type="primary" @click="toQuery">查找</el-button>
      <el-button class="filter-item" size="mini" type="info" @click="toCancle">取消</el-button>
    </el-row>
    </el-form>
    <!-- 新增 -->
    <div style="display: inline-block;margin: 0px 2px;">
      <eForm ref="form" :is-add="true" :dict="dict" :sup_this="sup_this"/>
    </div>
  </div>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import eForm from './form'
  export default {
    components: { eForm,Treeselect },
    props: {
      query: {
        type: Object,
        required: true
      },
      dict: {
        type: Object,
        required: true
      },
      sup_this: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
      }
    },
    methods: {
      toQuery() {
        this.sup_this.page = 0;
        this.sup_this.init()
      },
      toCancle(){
        this.query.cartNum = '';
        this.query.workerDeviceNum = '';
        this.query.workerName = '';
        this.query.idNum = '';
        this.query.deptId = '';
      }
    }
  }
</script>
<style scope>
  .vue-treeselect__control{
    height: 30.5px;
  }
  .vue-treeselect__placeholder{
    line-height: 30.5px;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 6px;
  }
  .el-input__inner{
    padding:0 8px
  }
  .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
</style>
